<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>推送测试</title>
    <link href="/zhaojun/css/global.css" rel="stylesheet">
    <link href="/zhaojun/css/styles.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/zhaojun/layui/css/layui.css"/>
    <script src="/zhaojun/js/jquery-1.8.3.min.js"></script>
    <script src="/zhaojun/js/chat.js"></script>
    <script src="/zhaojun/js/date.js"></script>
    <script type="text/javascript" src="/zhaojun/cim/message.js"></script>
    <script type="text/javascript" src="/zhaojun/cim/replybody.js"></script>
    <script type="text/javascript" src="/zhaojun/cim/sentbody.js"></script>
    <script type="text/javascript" src="/zhaojun/cim/cim.web.sdk.js"></script>
    <script src="/zhaojun/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="chat-bg">
<input type="hidden" id="account" value="IM-test"/>
<header class="header-title">推送测试</header>
    <section class="chat-box">
        <span class="chat-trip">此刻对方忙碌，请留言</span>
        <div class="bubbleDiv">
        </div>
    </section>

    <footer class="chat-edit clearfix">

        <!--<p class="chat-info" placeholder="想咨询他什么内容..." contenteditable="true"></p>-->
        <!--<span class="uploadImg fl"><input type="file" name="uploadfile" class="uploadfile"></span>-->
        <!--<button class="send-btn fr">发送</button>-->
    </footer>
<script>
    var $;
    var layer;
    var load;
    /**  当socket连接成功回调 **/
    function onConnectionSuccessed(){
        chat("tip","/zhaojun/images/dog.jpg","消息推送接收窗口启动!");
        CIMWebBridge.bindAccount($('#account').val());
    }
    /** 当收到请求回复时候回调  **/
    function onReplyReceived(reply)
    {
        layer.close(load);
        // console.log(reply);
        if(reply.key=='client_bind' && reply.code==200)
        {

        }
    }

    /** 当收到消息时候回调  **/

    function onMessageReceived(message)
    {
        console.log(message);
        if(message.action == ACTION_999){
            layer.alert("你已被强制下线!");
            return ;
        }
        chat("leftBubble","/zhaojun/images/dog.jpg",message.content);
        showNotification(message.content);
    }


    function initNotification(){
        //判断浏览器是否支持桌面通知
        if (window.Notification) {
            var notification = window.Notification;
            if (notification.permission == "default") {
                notification.requestPermission(function(permission) {
                });
            }
        }
    }

    function showNotification(msg){
        var notify = new Notification("系统消息", {
            body: msg,
            icon: '/zhaojun/images/dog.jpg',
            tag: 1
        });
        notify.onshow = function() {
            // setTimeout(function() {
            // 	notify.close();
            // }, 3000);
        }
    }

    window.onbeforeunload = function() //author: meizz
    {
        CIMWebBridge.stop();
    }
    $(window).unload(function (evt) {
        if (typeof evt == 'undefined') {
            evt = window.event;
        }
        if (evt) {
            CIMWebBridge.stop();
        }
    });



    layui.use(['layer','jquery'], function(){
        layer = layui.layer;
        load = layer.load(2);
        $ = layui.jquery;
        // websocket 代码
        CIMWebBridge.connection();

        //判断浏览器是否支持桌面通知
        initNotification();


        //页面代码
        /*
         左侧 接收别人信息 调用，三个参数：leftBubble，头像路径，内容
         chat(element,imgSrc,doctextContent)
         */
        // chat("leftBubble","/zhaojun/images/dog.jpg","消息推送接收窗口启动!");

        // $(".send-btn").click(function(){
        //     //右侧 自己发 调用，只需填一个参数"rightBubble"
        //     chat("rightBubble");
        //
        //     //清空输入框
        //     $('.chat-info').html('');
        // });
    });
</script>
</body>
</html>